<script setup lang="ts">
import type { DataTableColumns } from 'naive-ui'
import type { addElement } from '@/types/template/common'
import { useTemplateRef } from 'vue'
import { NButton } from 'naive-ui'
import { useApi } from '@/hooks/useApi'
import logApi from '@/service/api/system/log'
import DetailPop from './components/DetailPop.vue'
defineOptions({
  name: 'LogPage',
})
const listKey = 'postId'
const rowKey = (row) => row[listKey]
const container = ref(null)
const { tableMaxHeight, tableInfo, pageChange, sizeChange } = useApi({
  container,
  getData: logApi.list,
})
const detailRef = useTemplateRef<addElement>('detail')
const handDetail = (row) => {
  detailRef.value?.open(row)
}

/**
 *  获取列表
 * */
const columns: DataTableColumns = [
  {
    title: '操作',
    key: 'title',
  },
  {
    title: '操作人',
    key: 'createBy',
    width: 150,
  },
  {
    title: 'IP',
    key: 'remoteAddr',
    width: 150,
  },
  {
    title: '方式',
    key: 'method',
    width: 80,
  },
  {
    title: '接口',
    key: 'requestUri',
  },
  {
    title: '耗时',
    key: 'time',
    width: 80,
    render(row) {
      return h('div', {}, `${row.time}ms`)
    },
  },
  {
    title: '时间',
    key: 'createTime',
    width: 170,
  },
  {
    title: '操作',
    key: 'total',
    align: 'center',
    width: 80,
    render(row) {
      const arr = []
      const editBtn = h(
        NButton,
        {
          size: 'small',
          type: 'primary',
          quaternary: true,
          onClick: () => handDetail(row),
        },
        { default: () => '详情' },
      )
      arr.push(editBtn)
      return h('div', arr)
    },
  },
]
</script>

<template>
  <div class="list-page">
    <div class="list-page-main">
      <div class="table-w" ref="container">
        <n-data-table
          :max-height="tableMaxHeight"
          :single-line="false"
          :row-key="rowKey"
          :columns="columns"
          :loading="tableInfo.listLoading"
          :data="tableInfo.tableData"
        />
      </div>

      <div class="pagination">
        <n-pagination
          v-model:page="tableInfo.queryForm.current"
          v-model:page-size="tableInfo.queryForm.size"
          :page-count="tableInfo.total"
          :page-sizes="tableInfo.pageSizes"
          show-quick-jumper
          show-size-picker
          @updatePage="pageChange"
          @updatePageSize="sizeChange"
        />
      </div>
    </div>
    <detail-pop ref="detail" />
  </div>
</template>

<style lang="scss" scoped></style>
